import { useSelector } from 'react-redux';

export const TodoFooter = () => {
  const leftCount = useSelector(
    // (state) => state.todos.filter((item) => !item.done).length
    (state) => {
      // 数组的 reduce 累加 done 是false 的元素
      return state.todos.reduce((acc, item) => {
        if (!item.done) {
          // 未完成的时候累加
          return (acc += 1); // acc = acc + 1
        } else {
          return acc; // 原来是多少就返回多少
        }
      }, 0);
    }
  );

  return (
    <footer className="footer">
      <span className="todo-count">
        <strong>{leftCount}</strong> item left
      </span>
      <ul className="filters">
        <li>
          <a className="selected" href="#/">
            All
          </a>
        </li>
        <li>
          <a href="#/active">Active</a>
        </li>
        <li>
          <a href="#/completed">Completed</a>
        </li>
      </ul>
      <button className="clear-completed">Clear completed</button>
    </footer>
  );
};
